iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
自我挑戰組

溫故知新 JavaScript系列 第 19

Day19- 迴圈加上控制判斷

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20201002/20129439kZzSypFE9i.jpg
今天我們要把迴圈還有前面的控制判斷做個整合,看看可以應用在什麼地方上

題目

如果今天有以下的物件,我想要知道買超過 6000 的顧客有誰,你會怎麼寫呢?試著先想想看吧!

//商店顧客消費一欄表
var store = [
  {
    customer:'小美',
    amount: 2000,
  },
  {
    customer:'阿丹',
    amount: 10000,  
  },
  {
    customer:'小馬',
    amount: 8000,  
  },
  {
    customer:'妮妮',
    amount: 5000,  
  },
]

迴圈加上判斷寫法

這時我們可以這麼寫

var store_total = store.length

for(var i=0; i<store_total; i++){
  if( store[i].amount>6000){
    console.log('消費有超過6000元的有'+store[i].customer)
  }
}

第一步

第一行我們可以先建立一個變數,得知所有客戶的消費資料,因為範例中只有四筆資料但現實生活中可能資料來源是從資料庫抓過來的資料高達數萬筆我們得先用 store.length 得知所有資料的總數。

第二步

上一章節有介紹過迴圈的表達式,因為要知道這間店所有顧客的消費狀況,也很適合用迴圈去跑過所有的資料,所以這邊先用 for 迴圈裡面讓他從 0 開始跑所有消費資料的長度因為上面已經用 store_total 存起來了所以直接帶入這個變數,接著重點來囉!

第三步

此時我們可以在 for迴圈內再加上 if 的判斷式,裡面條件就是去抓在這個陣列中金額大於 6000 的資料,後面在用 console.log 去印出來有哪些顧客消費超過 6000 而抓取顧客名字的方法就是用陣列單元說過的使用 store[i].customer 這邊也附上程式的 Demo 這樣就可以達成取得消費超過 6000元的顧客資料囉!

關於 for 的累加

在前面的程式碼可以看到這個符號 i++ 這是讓程式不斷累加的意思實作上可能會比較有感覺可以打開瀏覽去的檢查工具去輸入以下指令

var i = 0;
console.log(i=i+1) //1
console.log(i+=1)  //2
console.log(i++)   //2
console.log(i)     //3

可以發現無論是 i=i+1 或是 i+=1 又或是 i++ 都是在做數字的累加,其中i+=1可以把它想成是 i=i+1 的概念,往後會滿常出現這的累加方式所以這邊要先有個概念。

把指定資料加總

根據本章節的題目,如果我想知道今天店裡面的營業額總共是多少,則可以應用剛剛提到的累加去做計算,程式碼如下


//顧客消費狀況
var store = [
  {
    customer:'小美',
    amount: 2000,
  },
  {
    customer:'阿丹',
    amount: 10000,  
  },
  {
    customer:'小馬',
    amount: 8000,  
  },
  {
    customer:'妮妮',
    amount: 5000,  
  },
]

//計算今天的營業額
var store_total = store.length;
var turnover = 0

for(var i=0; i<store_total;i++){
  turnover += store[i].amount;
  console.log('店家所有營業額:'+ turnover +'元');
}

這邊的 turnover += store[i].amount; 就是不斷地把取出來的金額與最上面建立的變數 turnover 去做相加,之後再印出來就得出營業額為 "店家所有營業額:25000元"。

以上就是迴圈加上控制判斷的應用,今天就分享到這邊囉!


上一篇
Day18- 關於迴圈
下一篇
Day20- 什麼是 DOM
系列文
溫故知新 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言